<template>
  <div class="whole wholeSyst">
    <div class="crumbs">
      <a-breadcrumb>
        <a-breadcrumb-item v-for="(item, index) in $route.matched" :key="index">
          <span v-if="index + 1 < $route.matched.length">{{
            item.meta.title
          }}</span>
          <router-link v-if="index + 1 == $route.matched.length" :to="item.path"
            >{{ item.meta.title }}
          </router-link>
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <a-form class="systemForm" v-bind="formItemLayout" :form="form">
      <div class="mainPart_filter_searchBox">
        <a-form>
          <a-input
            class="centerInp"
            v-model="filter"
            placeholder="请输入关键字"
          />
          <div class="centerBut" @click="onSearch(filter)"></div>
        </a-form>
      </div>
      <a-form-item>
        <div class="mainPart_filter_time">
          <span class="one"></span>
          <span class="two"></span>
          <a-range-picker @change="onChange"> </a-range-picker>
        </div>
      </a-form-item>

      <a class="a_but" href="javascript:;" v-if="cleanShow" @click="empty"> 清空 </a>
    </a-form>

    <a-table
      :class="TableAdmin"
      class="roleTable"
      rowKey="id"
      :columns="columns"
      :data-source="data"
      :pagination="pagination"
    >
      <span class="roleTableOperate" slot="status" slot-scope="text, record">
        <span v-if="record.status == '成功'" class="roleTableStatus1"></span>
        <span v-if="record.status == '失败'" class="roleTableStatus"></span>
        {{ record.status }}
      </span>
      <span slot="num" slot-scope="text, record, index">
        {{
          (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1
        }}
      </span>
    </a-table>
    <div class="Loading" style="z-index:10" v-show="Loading">
      <a-spin tip="Loading..."></a-spin>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import api from '../../api/systemLog/systemLog.js'
export default {
  data() {
    return {
      Loading: false,
      cleanShow: false,
      centerInp: "",
      filter: "",
      startTime: "",
      endTime: "",
      startTimeApply: "",
      endTimeApply: "",
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      rangeConfig: {
        rules: [
          { type: "array", required: false, message: "Please select time!" },
        ],
      },
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          key: "index",
          scopedSlots: { customRender: "num" },
          width: 78,
        },
        {
          title: "操作人",
          dataIndex: "createUserName",
          scopedSlots: { customRender: "createUserName" },
          width: 80,
        },
        {
          title: "操作时间",
          dataIndex: "createTime",
          scopedSlots: { customRender: "createTime" },
          customRender: (text, row, index) => {
            return moment(text).format("YYYY-MM-DD HH:mm:ss");
          },
          width: 150,
        },
        {
          title: "方法",
          dataIndex: "method",
          scopedSlots: { customRender: "method" },
          width: 300,
        },
        {
          title: "运行时间",
          dataIndex: "runTime",
          scopedSlots: { customRender: "runTime" },
          width: 78,
        },
        {
          title: "请求IP",
          dataIndex: "ip",
          scopedSlots: { customRender: "ip" },
          width: 100,
        },
        {
          title: "状态",
          dataIndex: "status",
          scopedSlots: { customRender: "status" },
          width: 78,
        },
      ],
      data: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        defaultPageSize: 10,
        showTotal: (total) => `共 ${total} 条数据`,
        pageSizeOptions: ["5", "10", "15", "20"],
        onShowSizeChange: (current) => this.onSizeChange(current),
        onChange: (current, pageSize) => this.onPageChange(current, pageSize),
      },
      systForm: {},
      TableAdmin:'TableAdmin',
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "time_related_controls" });
  },
  created() {
    this.getSystemLog();
    let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
    this.isShow(userInfo);
  },
  mounted(){
    let _this = this;
    window.Event.$on("menuLeft", val => {
      _this.menuLeft = val;
      if (_this.menuLeft != "menuDeaDolour") {
        _this.TableAdmin='TableAdmin';
      } else if (_this.menuLeft == "menuDeaDolour") {
        _this.TableAdmin='TableAdmin1';
      }
    });
    // _this.menuLeft1 = _this.$store.state.menuLeft;
    _this.menuLeft1 = sessionStorage.getItem('menuLeft')
    if (_this.menuLeft1 != "menuDeaDolour") {
      _this.TableAdmin='TableAdmin';
    } else if (_this.menuLeft1 == "menuDeaDolour") {
      _this.TableAdmin='TableAdmin1';
    }
  },
  methods: {
    moment,
    isShow(userInfo) {
      if (userInfo.permissions.includes("cf:sys:log:clean")) {
        this.cleanShow = true;
      }
    },
    onPageChange(current, pageSize) {
      this.pagination.current = current;
      this.pagination.pageSize = pageSize;
      this.getSystemLog();
    },
    onSizeChange(current) {
      this.pagination.current = current;
      this.getSystemLog();
    },
    onChange(dates, dateStrings) {
      if (dates.length != 0) {
        this.startTime = this.$dataMethod.dateFormat("YY-mm-dd", dates[0]._d);
        this.endTime = this.$dataMethod.dateFormat("YY-mm-dd", dates[1]._d);
        this.getSystemLog();
      }
    },
    onSearch(value) {
      this.pagination.current = 1;
      this.filter = value;
      this.getSystemLog();
    },
    empty() {
      let _this = this;
      _this.$confirm({
        title: '是否清空?',
        onOk() {
          api.systemLogClean().then(res=>{
            if(res.code == 200) {
              _this.$message.success("清空成功");
              _this.getSystemLog()
            }else {
              _this.$message.error("清空失败");
              _this.getSystemLog()
            }
          })
        },
        onCancel() {
          _this.getSystemLog();
        },
      });
    },
    getSystemLog() {
      let _this = this;
      _this.Loading = true;
      api.systemLogList(null, {pageNum: _this.pagination.current,pageSize: _this.pagination.pageSize,filter: _this.filter,startTime: _this.startTime,endTime: _this.endTime}).then(res=>{
        _this.Loading = false;
          if (res.code == 200) {
            _this.pagination.total = res.data.totalCount;
            _this.data = res.data.data;
            _this.data.forEach((key, val) => {
              if (key.status == 0) {
                key.status = "成功";
              } else {
                key.status = "失败";
              }
            });
          }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.whole {
  position: relative;
  .Loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .crumbs {
    display: flex;
    padding-left: 31px;
    margin-top: 14px;
    a,
    area,
    button,
    [role="button"],
    input:not([type="range"]),
    label,
    select,
    summary,
    textarea,
    .ant-breadcrumb {
      font-family: MicrosoftYaHei;
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #4d4d4d;
    }
    .ant-breadcrumb > span:last-child a {
      font-family: MicrosoftYaHei;
      font-size: 18px;
      font-weight: normal;
      letter-spacing: 0px;
      color: #1e7eff;
    }
  }
  .systemForm {
    display: flex;
    justify-content: flex-start;
    margin: 20px 0 20px 25px;
    height: 36px;
    .a_but {
      line-height: 36px;
      font-size: 16px;
      margin-left: 20px;
    }
  }
  .roleTable {
    margin-left: 25px;
    width: 1560px;
    background: #ffffff;
    border: 1px solid #c4d7e1;
    border-radius: 6px;
    .roleTableOperate {
      display: flex;
      align-items: center;
      .roleTableStatus {
        display: inline-block;
        width: 6px;
        height: 6px;
        background: #ff9600;
        border-radius: 50%;
        margin-right: 20px;
      }
      .roleTableStatus1 {
        display: inline-block;
        width: 6px;
        height: 6px;
        background: #00bf0c;
        border-radius: 50%;
        margin-right: 20px;
      }
    }
  }
  .mainPart_filter_searchBox {
    width: 400px;
    height: 36px;
    border-radius: 18px;
    border: solid 1px #9d9d9d;
    min-height: 36px;
    position: relative;
    .centerInp {
      position: absolute;
      left: 0;
      width: 93%;
      border: none;
      border-style: none;
      background: none;
      box-shadow: none;
      border-radius: 18px;
      padding-left: 21px;
    }
    .centerBut {
      width: 18px;
      height: 18px;
      position: absolute;
      right: 19px;
      top: 8px;
      background-image: url(../../../images/home/icon-search.png);
      background-size: cover;
      background-size: 100% 100%;
    }
  }
  .mainPart_filter_time {
    width: 300px;
    height: 36px;
    display: flex;
    position: relative;
    margin-left: 38px;
    .ant-calendar-picker-input.ant-input {
      width: 260px !important;
    }
    .one {
      width: 14px;
      height: 16px;
      background-image: url(../../../images/home-showAll/icon-date.png);
      background-size: cover !important;
      background-size: 100% 100% !important;
      position: absolute;
      left: 40%;
      top: 25%;
    }
    .two {
      width: 14px;
      height: 16px;
      background-image: url(../../../images/home-showAll/icon-date.png);
      background-size: cover !important;
      background-size: 100% 100% !important;
      position: absolute;
      right: 6%;
      top: 25%;
    }
    .startTimeApply {
      position: absolute;
      top: 20%;
      left: 12%;
      color: rgb(128, 128, 128);
    }
    .endTimeApply {
      position: absolute;
      top: 20%;
      right: 12%;
      color: rgb(128, 128, 128);
    }
  }
}
</style>
<style>
.roleTable {
  position: relative !important;
}

.wholeSyst .mainPart_filter_time .ant-calendar-picker-input {
  border: none !important;
  background: none !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
}

.wholeSyst .mainPart_filter_time .ant-calendar-range-picker-input {
  height: 34px !important;
  line-height: 34px !important;
  border-bottom: solid 1px #9d9d9d !important;
}

.wholeSyst .mainPart_filter_time .ant-calendar-picker-clear,
.wholeSyst .ant-calendar-picker-icon {
  background-color: none !important;
  position: absolute !important;
  left: 50% !important;
  width: 6px !important;
  height: 1px !important;
  background: #000 !important;
  transform: translate(-3px) !important;
  top: 70% !important;
}

.wholeSyst .mainPart_filter_time .ant-calendar-range-picker-separator {
  color: rgba(255, 255, 255, 0) !important;
}

.wholeSyst
  .mainPart_filter_time
  .anticon.anticon-close-circle.ant-calendar-picker-clear {
  position: absolute !important;
  left: 96% !important;
  top: 50% !important;
  border: none !important;
  background: none !important;
}
</style>